// import { useState } from "react";
import reactDom from 'react-dom'

let states = []
let setters = []
let stateIndex = 0

function createSetter(index) {
  return function (newValue) {
    console.log(index)
    states[index] = newValue
    render()
  }
}

function useState(initialValue) {
  stateIndex = stateIndex ? stateIndex : stateIndex
  states[stateIndex] = states[stateIndex] ? states[stateIndex] : initialValue

  setters.push(createSetter(stateIndex))

  let value = states[stateIndex]
  let setter = setters[stateIndex]
  stateIndex++
  return [value, setter]
}

function render() {
  stateIndex = 0
  reactDom.render(<App></App>, document.getElementById('root'))
}

function App() {
  const [count, setCount] = useState(0)
  // const [name, setName] = useState('zhang')

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      {/* <h1>{name}</h1>
      <button onClick={() => setName('wang')}>setName</button> */}
    </div>
  )
}

export default App
